<template>
  <div style="display: inline-block">
    <img v-lazy="image_path" :height="height" :width="width" />
  </div>
</template>

<script>

  export default {
    name: 'img-format',
    props: {
      src: {
        type: String,
        default: ''
      },
      size: {
        type: Number,
        default: 90
      },
      extension: {
        type: String,
        default: 'png'
      },
      height: {
        type: String,
        default: '100%'
      },
      width: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        baseUrl: 'https://cube.elemecdn.com/',
        content:'?x-oss-process=image/format,webp/resize,w_',
        image_path: ''
      }
    },
    created() {
      this.image_path = this.baseUrl + this.srcTo + this.extensionTo + this.content + this.size
    },
    computed: {
      srcTo() {
        return this.src.substr(0, 1) + '/' +this.src.substr(1, 2) + '/' + this.src.substr(3)
      },
      extensionTo() {
        if(this.src.substr(-4) === 'JPEG') {
          return '.JPEG'
        }else if(this.src.substr(-3) === 'png') {
          return '.png'
        }else if(this.src.substr(-4) === 'jpeg') {
          return '.jpeg'
        }else if(this.src.substr(-3) === 'jpg') {
          return '.jpg'
        }
      }
    }
  }
</script>
<style>
</style>
